/* 响应式断点变量 */
:root {
  --breakpoint-xs: 320px;
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1440px;
  
  /* 容器最大宽度 */
  --container-xs: 100%;
  --container-sm: 100%;
  --container-md: 100%;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-xxl: 1400px;
  
  /* 间距变量 */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;
  --spacing-xxl: 32px;
  
  /* 字体大小变量 */
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-xxl: 20px;
}

/* 响应式容器类 */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.container-fluid {
  width: 100%;
  padding: 0 var(--spacing-md);
}

/* 响应式网格系统 */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--spacing-md) / -2);
}

.col {
  flex: 1;
  padding: 0 calc(var(--spacing-md) / 2);
}

/* 响应式显示/隐藏类 */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }

/* 移动端显示/隐藏 */
@media (max-width: 767px) {
  .d-md-none { display: none !important; }
  .d-md-block { display: block !important; }
  .d-md-flex { display: flex !important; }
  .d-mobile-block { display: block !important; }
  .d-mobile-none { display: none !important; }
}

/* 平板显示/隐藏 */
@media (min-width: 768px) and (max-width: 1023px) {
  .d-tablet-block { display: block !important; }
  .d-tablet-none { display: none !important; }
}

/* 桌面端显示/隐藏 */
@media (min-width: 1024px) {
  .d-desktop-block { display: block !important; }
  .d-desktop-none { display: none !important; }
  .d-md-block { display: block !important; }
  .d-md-none { display: none !important; }
}

/* 响应式文本对齐 */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

@media (max-width: 767px) {
  .text-mobile-center { text-align: center; }
  .text-mobile-left { text-align: left; }
}

/* 响应式间距 */
.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-xs); }
.p-2 { padding: var(--spacing-sm); }
.p-3 { padding: var(--spacing-md); }
.p-4 { padding: var(--spacing-lg); }
.p-5 { padding: var(--spacing-xl); }

.m-0 { margin: 0; }
.m-1 { margin: var(--spacing-xs); }
.m-2 { margin: var(--spacing-sm); }
.m-3 { margin: var(--spacing-md); }
.m-4 { margin: var(--spacing-lg); }
.m-5 { margin: var(--spacing-xl); }

/* 响应式字体大小 */
.fs-xs { font-size: var(--font-size-xs); }
.fs-sm { font-size: var(--font-size-sm); }
.fs-md { font-size: var(--font-size-md); }
.fs-lg { font-size: var(--font-size-lg); }
.fs-xl { font-size: var(--font-size-xl); }
.fs-xxl { font-size: var(--font-size-xxl); }

/* 移动端优化 */
@media (max-width: 767px) {
  .container {
    padding: 0 var(--spacing-sm);
  }
  
  .container-fluid {
    padding: 0 var(--spacing-sm);
  }
  
  .row {
    margin: 0 calc(var(--spacing-sm) / -2);
  }
  
  .col {
    padding: 0 calc(var(--spacing-sm) / 2);
  }
}

/* 小屏手机优化 */
@media (max-width: 479px) {
  .container {
    padding: 0 var(--spacing-xs);
  }
  
  .container-fluid {
    padding: 0 var(--spacing-xs);
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  /* 增加触摸目标大小 */
  button, 
  .btn, 
  a[role="button"], 
  input[type="button"], 
  input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* 优化表单元素 */
  input, 
  textarea, 
  select {
    min-height: 44px;
  }
}